<template>
  <div class="container">
    <div>
      <div class="menu-navbar">
        <el-button size="small" type="" @click="cancelSubmit">取消</el-button>
        <el-button size="small" type="success" @click="createSubmit('dataForm')">更新</el-button>
      </div>
      <div>
        <el-form ref="dataForm" :model="record" :rules="recordRules" label-position="top" size="small"  label-width="110px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="分类名称" prop="name">
                <el-input v-model="record.name" placeholder="分类名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类状态" prop="status">
                <el-select v-model="record.status" clearable placeholder="分类状态">
                  <el-option
                    v-for="item in typeOptions"
                    :key="item.type"
                    :label="item.value"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="排序号" prop="orderNo">
                <el-input v-model="record.orderNo" placeholder="排序号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remarks">
                <el-input type="textarea"  v-model="record.remarks" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        classifyOptions: [],
        natureOptions: [],
        queryArgs: {
          condition: [
            {
              property: 'id',
              value: '',
              type: 'EQ'
            }
          ]
        },
        typeOptions: [
          {
            type: '',
            value: ''
          },
          {
            type: '0',
            value: '活动'
          },
          {
            type: '1',
            value: '禁用'
          },
          {
            type: '2',
            value: '删除'
          }
        ],
        record: {
          id: '',
          parentId: '',
          name: '',
          status: '',
          orderNo: '',
          remarks: ''
        },
        recordRules: {
          name: [
            { message: '分类名称不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 128, message: '最大长度为 128 个字符', trigger: 'blur' }
          ],
          orderNo: [
            { message: '排序号不能为空', required: true, trigger: 'blur' },
            { min: 1, max: 8, message: '最大长度为 8 个字符', trigger: 'blur' }
          ],
          status: [
            { message: '分类状态不能为空', required: true, trigger: 'blur' }
          ],
          remarks: [
            { message: '', required: false, trigger: 'change' },
            { min: 0, max: 512, message: '最大长度为 256 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    created() {
      this.fetchData()
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      // '$route.name': ['GetCodeList', 'GetCodeList1']
    },
    methods: {
      fetchData() {
        this.queryArgs.condition[0].value = this.$route.params.id
        this.$store.dispatch('LibraryCategorySelect', this.queryArgs).then(res => {
          this.record = res.data.records[0]
        }).catch((err) => {
          console.log(err)
        })
      },
      createSubmit(formName) {
        console.log(this.record)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.saveRecord()
          } else {
            this.$message({
              type: 'danger',
              message: '更新失败!'
            })
            console.log('error submit!!')
            return false
          }
        })
      },
      cancelSubmit() {
        this.$router.push({
          name: 'libraryCategoryView',
          params: { id: this.$route.params.id }
        })
      },
      saveRecord() {
        this.$store.dispatch('LibraryCategoryUpdateById', this.record).then(res => {
          this.$emit('treeRefresh')
          this.$router.push({
            name: 'libraryCategoryView',
            params: { id: this.$route.params.id }
          })
          this.$message({
            type: 'success',
            message: '更新成功!'
          })
        }).catch((err) => {
          console.log(err)
        })
      }
    }
  }
</script>
<style scoped>
  .menu-navbar{
    padding:0 0 20px;
    text-align: right;
  }
  .container{
    padding: 20px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
</style>
